<template>
  <view class="home flex-columna">
    <view class="home-header flex-columna" style="background-image: url('../../static/home_bg.png')">
    <view>
      <view class="serve u-skeleton-rect">
        <view class="flex-rowa" style="padding: 28rpx 0rpx 0rpx 32rpx"
          ><text class="f14" style="color: #303a3a; margin-right: 6rpx"
            >常用服务</text
          >
          <view class="triangle"></view
        ></view>

        <u-scroll-list indicatorActiveColor="#409EFF" indicatorWidth="56rpx" indicatorStyle="margin-top:16rpx">
          <view class="scroll-list" style="flex-direction: row">
            <view
              class="scroll-list__goods-item"
              v-for="(item, index) in serveList"
              :key="index"
              :class="[
                index === 6 && 'scroll-list__goods-item--no-margin-right',
              ]"
            >
              <image
                class="scroll-list__goods-item__image"
                :src="item.contentPic"
              />
              <text class="scroll-list__goods-item__text">{{
                item.contentTitle
              }}</text>
            </view>
          </view>
        </u-scroll-list>
      </view>
      <!-- 通知公告 -->
      <view
        class="inForm"
        style="background-image: url('../../static/inform_bg.png')"
      >
        <swiper class="swiper inform-scroll" :interval="5000" :vertical="true" 	autoplay="true">
          <swiper-item>
            <view class="swiper-item uni-bg-red"
              >
              <view class="flex-rowa" style="margin-bottom: 20rpx">
                <view class="top">
                  <text class="f10">置顶</text>
                </view>
              <view style="display:flex;align-items: center">
                  <text class="f12" style="color: #edf3fc"
                  >系统更新维护暂停扫码功能</text
                >
                <text class="f10" style="color: #afc7eb">5分钟前</text>
              </view>
              </view></view
            >
          </swiper-item>
          <swiper-item>
            <view>2222</view>
          </swiper-item>
        </swiper>
        <view
          class="flex-row"
          style="margin-bottom: 20rpx; align-items: center;padding-left: 46rpx;"
        >
          <view class="new">
            <text class="f10" style="color: #151515">最新</text>
          </view>
          <text class="f12" style="color: #edf3fc">开学嘉年华回馈活动</text>
          <text class="f10" style="color: #afc7eb">5分钟前</text>
        </view>
        <!-- <u-notice-bar
          :text="text1"
          direction="column"
          color="#fdf6ec"
          bgColor="transparent"
          speed="250"
          url="/pages/componentsB/tag/tag"
        ></u-notice-bar> -->
        <!-- <scroll-view scroll-y @scrolltolower="handleScrolltolower">
          <view class="inform-scroll flex-column">
            <view>
              <view class="flex-row" style="margin-bottom: 20rpx">
                <view class="top">
                  <text class="f10">置顶</text>
                </view>
                <text class="f12" style="color: #edf3fc"
                  >系统更新维护暂停扫码功能</text
                >
                <text class="f10" style="color: #afc7eb">5分钟前</text>
              </view>
              <view
                class="flex-row"
                style="margin-bottom: 20rpx; align-items: center"
              >
                <view class="new">
                  <text class="f10" style="color: #151515">最新</text>
                </view>
                <text class="f12" style="color: #edf3fc"
                  >开学嘉年华回馈活动</text
                >
                <text class="f10" style="color: #afc7eb">5分钟前</text>
              </view>
            </view>
          </view>
        </scroll-view> -->
        <view class="inform-click">
          <image
            class="width100 height100"
            src="/static/inform_click.png"
            mode=""
          />
        </view>
      </view>
      <!-- 其他工具 -->
      <view class="flex-rowa" style="margin-bottom: 30rpx">
        <text class="f14" style="color: #303a3a; margin-right: 6rpx"
          >其他工具</text
        >
        <view class="triangle"></view>
      </view>
      <view class="flex-row" style="margin-bottom: 62rpx">
        <view class="tool-revenue">
          <view class="tool-image"
            ><image
              class="width100 height100"
              src="/static/revenue-text.png"
              mode=""
          /></view>
          <text class="tool-text">营收数据分析</text>
          <button class="button_default golook">去查看</button>
          <!-- <view class="golook">去查看</view> -->
        </view>
        <view class="flex-column">
          <view class="tool-file">
            <view class="tool-image"
              ><image
                class="width100 height100"
                src="/static/file-text.png"
                mode=""
            /></view>
            <text class="tool-text">文件管理专区</text>
          </view>
          <view class="tool-assess">
            <view class="tool-image"
              ><image
                class="width100 height100"
                src="/static/assess-text.png"
                mode=""
            /></view>
            <text class="tool-text">绩效考核情况</text>
          </view>
        </view>
      </view>
    </view>
    <customTabbar></customTabbar>

    <u-skeleton :loading="true" el-color="#ddd" bg-color="#fff">11</u-skeleton>
  </view>
    </view>

</template>

<script>
import customTabbar from "../../components/customTabbar";
export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      messages: [
        { type: "important", content: "重要消息1" },
        { type: "normal", content: "普通消息2" },
        { type: "normal", content: "普通消息3" },
        // 添加更多消息...
      ],
      text1: [
        "uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用",

        "啦啦啦",
      ],

      loading: true,
      serveList: [
        {
          contentPic: "/static/serve_icon1.png",
          contentTitle: "抄表",
        },
        {
          contentPic: "/static/serve_icon2.png",
          contentTitle: "故障维修",
        },
        {
          contentPic: "/static/serve_icon3.png",
          contentTitle: "扫码收料",
        },
        {
          contentPic: "/static/serve_icon4.png",
          contentTitle: "仓库盘点",
        },
        {
          contentPic: "/static/serve_icon5.png",
          contentTitle: "开场任务",
        },
        {
          contentPic: "/static/serve_icon6.png",
          contentTitle: "上报营收",
        },
      ],
      currentIndex: 0,
    };
  },
  onShow() {
    wx.getUserInfo({
      withCredentials: "false",
      lang: "zh_CN",
      timeout: 10000,
      success: (result) => {},
      fail: () => {},
      complete: () => {},
    });
  },
  onLoad() {},
  onUnload() {},
  mounted() {},
  methods: {
    click() {
      console.log();
    },
    handleScrolltolower() {},
    getItem(item) {
      // handle item click event
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
    overflow-y: auto;
    height: 100vh;
    padding-bottom: 184rpx;

  .home-header {
    width: 100%;
    height: 100vh;
    background-size: cover

  }
  .transparent-notice-bar {
    background-color: transparent;
    flex-direction: column;
    overflow: hidden;
  }
  .triangle {
    width: 0;
    height: 0;
    border-top: 15rpx solid #000000;
    border-right: 11rpx solid transparent;
    border-left: 11rpx solid transparent;
  }
  .tool-revenue {
    width: 342rpx;
    height: 436rpx;
    background-size: cover;
    background-image: url("../../static/tool_revenue.png");
    margin-right: 24rpx;
    position: relative;
    .golook {
      width: 132rpx;
      height: 56rpx;
      font-size: 24rpx;
      color: #3279fb;
      background: #dfeaff;
      border-radius: 256rpx;
      position: absolute;
      top: 140rpx;
      left: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .tool-file {
    width: 336rpx;
    height: 210rpx;
    background-size: cover;
    margin-bottom: 14rpx;
    background-image: url("../../static/tool_file.png");
    position: relative;
  }
  .tool-assess {
    width: 336rpx;
    height: 210rpx;
    background-size: cover;
    background-image: url("../../static/tool_assess.png");
    position: relative;
  }
  .tool-image {
    width: 168rpx;
    height: 36rpx;
    position: absolute;
    top: 36rpx;
    left: 28rpx;
  }
  .tool-text {
    font-size: 24rpx;
    color: #687690;
    position: absolute;
    top: 84rpx;
    left: 30rpx;
  }
  .top {
    width: 60rpx;
    height: 32rpx;
    border-radius: 8rpx;
    border: 2rpx solid #edf9ff;
    color: #edf3fc;
    display: flex;
    justify-content: center;
    margin-right: 10rpx;
  }
  .new {
    width: 60rpx;
    height: 32rpx;
    background: #dafb55;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    margin-right: 10rpx;
  }
  .inForm {
    width: 712rpx;
    height: 210rpx;
    position: relative;
    background-size: cover;
    margin-bottom: 20rpx;

    .inform-click {
      width: 146rpx;
      height: 54rpx;
      position: absolute;
      bottom: 24rpx;
      right: 18rpx;
    }
    .inform-scroll {
      width: 100%;
      height: 40rpx;
      padding-top: 86rpx;
      padding-left: 46rpx;
      display: flex;
          margin-bottom: 10rpx;
    }
  }
  .home-content {
  }
  .serve {
    width: 702rpx;
    height: 272rpx;
    border-radius: 40rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(216, 216, 216, 0.33);
    margin-top: 352rpx
  }
  .scroll-list {
    @include flex(column);
    margin-top: 20rpx;
    margin-left: 28rpx;
    &__goods-item {
      margin-right: 40rpx;
      text-align: center;

      &__image {
        width: 96rpx;
        height: 96rpx;
      }

      &__text {
        color: #48576f;
        text-align: center;
        font-size: 24rpx;
        margin-top: 10rpx;
      }
  
    }

    &__show-more {
      background-color: #fff0f0;
      border-radius: 3px;
      padding: 3px 6px;
      @include flex(column);
      align-items: center;

      &__text {
        font-size: 12px;
        width: 12px;
        color: #f56c6c;
        line-height: 16px;
      }
    }
  }
}

</style>
